// 🎨 头部样式优化
// 优化折叠按钮和其他头部元素的视觉效果

// ======================== 折叠按钮样式 ========================
.global-header {
  .menu-toggler {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 18px;
    margin-right: 12px;
    color: rgba(0, 0, 0, 0.65);
    transition: all 0.2s;
    
    &:hover {
      background: rgba(0, 0, 0, 0.06);
      color: var(--el-color-primary);
    }
    
    &:active {
      background: rgba(0, 0, 0, 0.1);
    }
    
    // 确保图标居中
    .el-icon {
      font-size: 18px;
    }
  }
  
  // 暗色主题
  html.dark & {
    .menu-toggler {
      color: rgba(255, 255, 255, 0.65);
      
      &:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--el-color-primary);
      }
      
      &:active {
        background: rgba(255, 255, 255, 0.12);
      }
    }
  }
}

// ======================== 头部其他按钮统一样式 ========================
.global-header {
  .fullscreen-toggle,
  .layout-setting-toggle,
  .theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 18px;
    margin-left: 8px;
    color: rgba(0, 0, 0, 0.65);
    transition: all 0.2s;
    
    &:hover {
      background: rgba(0, 0, 0, 0.06);
      color: var(--el-color-primary);
    }
    
    .el-icon {
      font-size: 18px;
    }
  }
  
  html.dark & {
    .fullscreen-toggle,
    .layout-setting-toggle,
    .theme-toggle {
      color: rgba(255, 255, 255, 0.65);
      
      &:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--el-color-primary);
      }
    }
  }
}

// ======================== 头部背景优化 ========================
.global-header {
  background: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  
  html.dark & {
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
}

